<template>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item">{{$t('姓名')}}</a-col>
    <a-col :span="8" :order="2" class="col_item">{{data.name}}</a-col>
    <a-col :span="4" :order="3" class="col_item">{{$t('身份证号码')}}</a-col>
    <a-col :span="8" :order="4" class="col_item">{{ data.idcard }}</a-col>
  </a-row>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item2 ">{{$t('身份证正面')}}</a-col>
    <a-col :span="8" :order="2" class="col_item2">
        <div style="height:200px">
          <a-image
              :width="200"
              height="100%"
              :src="data.frontIdCardUrl"
          />
        </div>
    </a-col>
    <a-col :span="4" :order="3" class="col_item2 flex_center">{{$t('身份证反面')}}</a-col>
    <a-col :span="8" :order="4" class="col_item2">
      <div style="height:200px">
        <a-image
            :width="200"
            height="100%"
            :src="data.negativeIdCardUrl"
        />
      </div>
    </a-col>
  </a-row>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item2 ">{{$t('手持身份证')}}</a-col>
    <a-col :span="8" :order="2" class="col_item2">
      <div style="height:200px">
        <a-image
            v-if="data.handIdCardUrl"
            :width="200"
            height="100%"
            :src="data.handIdCardUrl"
        />
      </div>
    </a-col>
  </a-row>
</template>

<script>
import {reactive, watch,ref} from "vue"

export default {
  name: "index",
  props: {
    userInfo: {}
  },
  setup(props) {
    const data = ref({})
    watch(() => props.userInfo.value, (value) => {
      data.value = value
    })
    return {
      data
    }
  }
}
</script>

<style scoped>
.col_item{
  line-height:45px;
  border: 1px solid #eeeeee;
  text-align:center;
}
.col_item2{
  border: 1px solid #eeeeee;
  text-align:center;
  padding: 10px;
  display: flex;
  align-items:center;
  justify-content: center;

}
</style>
